<template>
  <div :class="{ 'pop-up': true, show: show }">
    <div class="popup-mask" v-if="hasMark"></div>
    <transition name="bottom">
      <div class="popup-note bottom" v-if="show">
        <div class="popup-note-header">
          {{ msg }}
        </div>

        <div class="popup-note-middle">
          <div class="popup-note-icon">
            <i v-if="type === 'warning'" class="icon-info"></i>
            <i v-else-if="type === 'success'" class="icon-success"></i>
            <i v-else class="icon-info info"></i>
          </div>
          <div class="pop-note-content">
            <div class="pop-note-content-msg" v-if="vNode" v-html="title"></div>
            <div class="pop-note-content-msg" v-else>
              {{ title }}
            </div>
          </div>
        </div>

        <div class="pop-note-footer">
          <div v-if="type !== 'tip'" class="pop-note-footer-type">
            <el-button class="mr-1 pop-note-btn" @click.prevent="noClick">
              {{ cancelButtonText }}
            </el-button>
            <el-button
              class="pop-note-footer-ysebtn pop-note-btn"
              type="primary"
              @click.prevent="yesClick"
            >
              {{ confirmButtonText }}
            </el-button>
          </div>
          <div v-else class="pop-note-footer-type">
            <el-button @click.prevent="noClick">
              {{ alertBtnText }}
            </el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from 'element-plus'
import { ref } from 'vue'
defineProps({
  title: {
    type: String,
    default: '提示'
  },
  msg: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: () => 'warning'
  },
  alertBtnText: {
    type: String,
    default: '我知道了'
  },
  confirmButtonText: {
    type: String,
    default: '确定'
  },
  cancelButtonText: {
    type: String,
    default: '取消'
  },
  hasMark: {
    type: Boolean,
    default: true
  },
  vNode: {
    type: Boolean,
    default: false
  }
})

let promiseStatus = null
let show = ref(false)
const confirm = () => {
  show.value = true
  return new Promise(function (resolve, reject) {
    promiseStatus = { resolve, reject }
  })
}
const noClick = () => {
  show.value = false
  promiseStatus && promiseStatus.reject()
}
const yesClick = () => {
  show.value = false
  promiseStatus && promiseStatus.resolve()
}

defineExpose({
  confirm
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
